<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Scalabel</title>
    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <link rel="stylesheet"
        href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"
        integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Exo+2" />
    <!-- Style CSS -->
    <link href="./css/image.css" rel="stylesheet">
    <style>
        /*<!--Paragraphs-->*/
        img {
            margin: 0;
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        h1 {
            font-size: 200%;
            text-align: center;
            color: lightgrey;
            white-space: nowrap;

            margin: 0;
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        p.b {
            font-weight: lighter;
            font-size: 90%;
            text-align: center;
            color: #dddddd;
            white-space: nowrap;

            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        a {
            color: white;
            font-size: 110%;
        }

        br {
            line-height: 200%;
        }

        .bdd_font {
            font-family: Exo+2;
            font-style: italic;
            font-weight: normal;
        }

        .bdd_font:hover {
            color: #FDB515;
        }

        .scalabel_font {
            font-weight: normal;
        }

        .scalabel_font:hover {
            color: lightblue;
        }

        .btn {
            color: lightgrey;
            padding: 16px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;

            margin: 0;
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .button:hover {
            background-color: darkgrey;
        }
    </style>
</head>

<body style="background-color:#3B7EA1;">

    <img src="img/scalabel_white.svg" alt="Scalabel Logo" align="middle" height="200">
    <br />
    <p class="b"> A scalable open-sourced annotation web tool
        brought by <a href="https://deepdrive.berkeley.edu/" class="bdd_font"> Berkeley DeepDrive </a> <br>
        For more information: <a class="scalabel_font" href="http://scalabel.ai"> Scalabel.ai</a>.
    </p>
    <br />
    <div>
        <a class="btn btn-light" href="/create" style="cursor:default;">Open or create project</a>
    </div>

</body>

</html>